<template>
  <!-- index.wxml -->
  <view class="container">
    <view class="headerCon">
      <view class="search">
        <view class="flex-box flex-box-v-center">
          <view class="flex-box flex-item-1 flex-box-v-center searchCon">
            <view class="icon">
              <image src="/static/static/image/search.png"></image>
            </view>
            <view class="text flex-item-1 font_s_28 font_c_8e">
              <input @input="bindKeyInput"
                     :value="value"
                     type="text"
                     placeholder="春夏秋冬"></input>
            </view>
            <view class="icon">
              <image src="/static/static/image/camera.png"></image>
            </view>
          </view>
          <view @tap="confirmSearch"
                class="confirmSearch font_s_30 font_c_8e">搜索</view>
        </view>
      </view>
    </view>
    <view class="shortcutSeek">
      <text :data-text="item"
            v-for="(item, index) in hotWord"
            :key="index"
            :class="'shortcutSeekItem ' + item.color + ' font_s_24'">{{item.text}}</text>
    </view>
  </view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp().globalData

export default {
  data() {
    return {
      hotWord: [
        {
          id: 1,
          text: '春装任意拼 6折',
          color: 'pink'
        },
        {
          id: 2,
          text: '夏装不要钱',
          color: 'pink'
        },
        {
          id: 3,
          text: '秋装',
          color: 'grey'
        },
        {
          id: 4,
          text: '冬装加价购',
          color: 'grey'
        }
      ],
      value: ''
    }
  },

  components: {},
  props: {},
  onLoad: function() {},
  methods: {
    bindKeyInput(event) {
      this.value = event.detail.value
    },

    //事件处理函数
    confirmSearch(event) {
      console.log('用户搜索的内容', this.value)
    }
  }
}
</script>
<style>
@import './search.css';
</style>